<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<script>
	function deleteElement(codigo){
		customConfirmation("Realmente desea eliminar el dispositivo", function(){// agregar un mensaje aceptar/cancelar para confirmar si se elimina o no.
		$.getJSON("removeDispositivo", { codigo: codigo }, function(json) {
				if(json.status==true){
					var oTable = $('#tablaDispositivos').dataTable();
					oTable.fnDraw();
					customAlert("El dispositivo se elimino correctamente");
				}else{
					customAlert("Ocurrio un error al intentar eliminar el dispositivo");
				}
		    });
		}, function(){ });
	}

	function showDetail(codigo) {
	    $.getJSON("getDispositivoDetail", { codigo: codigo }, function(dispositivo) {
	        $("#upd_codigo").val(dispositivo.codigo);
	        $("#upd_modelo").val(dispositivo.modelo);
	        $("#upd_stock").val(dispositivo.stockMinimo);
	        $("#actualizarRegistroDialog").dialog("open");
	    });
	}
	
	function showDetailEstado(codigo) {
	    $.getJSON("getEstado", { id: codigo }, function(estado) {
	        $("#upd_estado_codigo").val(estado.id);
	        $("#upd_estado").val(estado.estado);
	        $("#actualizarEstadoDialog").dialog("open");
	    });
	}
	
	function addNewDispositivo(){
		var codigo = $("#add_codigo").val();
		var modelo = $("#add_modelo").val();
		var stock = $("#add_stock").val();
		$.getJSON("addDispositivo", { codigo:codigo, modelo:modelo, stockMinimo:stock }, function(json) {
			if(json.status==true){
				var oTable = $('#tablaDispositivos').dataTable();
				oTable.fnDraw();
				customAlert("El registro se agrego correctamente");
			}else{
				customAlert("Ocurrio un error al intentar agregar el registro");
			}
	    });
	}
	
	function updateDispositivo() {
		var codigo = $("#upd_codigo").val();
		var modelo = $("#upd_modelo").val();
		var stock = $("#upd_stock").val();
		$.getJSON("updateDispositivo", { codigo:codigo, modelo:modelo, stockMinimo:stock }, function(json) {
			if(json.status==true){
				var oTable = $('#tablaDispositivos').dataTable();
				oTable.fnDraw();
				customAlert("El dispositivo se actualizo correctamente");
			}else{
				customAlert("Ocurrio un error al intentar actualizar el dispositivo");
			}
	    });
	}
	
	function deleteEstado(codigo){
		customConfirmation("Realmente desea eliminar el estado", function(){// agregar un mensaje aceptar/cancelar para confirmar si se elimina o no.
		$.getJSON("removeEstado", { id: codigo }, function(json) {
				if(json.status==true){
					var oTable = $('#tablaEstados').dataTable();
					oTable.fnDraw();
					customAlert("El Estado se elimino correctamente");
				}else{
					customAlert("Ocurrio un error al intentar eliminar el estado");
				}
		    });
		}, function(){ });
	}
	
	function addNewEstado(){
		var estado = $("#add_estado_estado").val();
		$.getJSON("addEstado", { estado:estado }, function(json) {
			if(json.status==true){
				var oTable = $('#tablaEstados').dataTable();
				oTable.fnDraw();
				customAlert("El estado se agrego correctamente");
			}else{
				customAlert("Ocurrio un error al intentar agregar el estado");
			}
	    });
	}
	
	function updateEstado() {
		var id = $("#upd_estado_codigo").val();
		var estado = $("#upd_estado").val();
		$.getJSON("updateEstado", { id:id, estado:estado }, function(json) {
			if(json.status==true){
				var oTable = $('#tablaEstados').dataTable();
				oTable.fnDraw();
				customAlert("El estado se actualizo correctamente");
			}else{
				customAlert("Ocurrio un error al intentar actualizar el estado");
			}
	    });
	}
	
	function clearFilters(){
		var filter_box = $(".dataTables_filter input");
		
		$.each(filter_box, function (index, item){
			item.value="";
		});
		
		var oTable = $('#tablaDispositivos').dataTable();
		oTable.fnResetAllFilters();
	}
	
	$(function() {
		var allFields = $([]).add("#add_codigo").add("#add_modelo").add("#add_stock");
		$("#dialog-form").dialog({
			autoOpen: false,
			height: 270,
			width: 350,
			modal: true,
			resizable: false,
			buttons: {
				"Aceptar": function() {
					var bValid = true;
					allFields.removeClass( "ui-state-error" );
	
					bValid = bValid && checkLength( $("#add_codigo"), "Codigo", 3, 30);
					bValid = bValid && checkLength( $("#add_modelo"), "Modelo", 4, 80 );

					bValid = bValid && checkLength( $("#add_stock"), "Stock minimo", 1, 4);
					bValid = bValid && checkRegexp( $("#add_stock"), /^([0-9]*)$/, "El campo stock minimo solo admite numeros" );
					
					if (bValid) {
						addNewDispositivo();
						var oTable = $('#tablaDispositivos').dataTable();
						oTable.fnDraw();
						$(this).dialog("close");
					}
				},
				"Cancelar": function() {
					$("#dialog-form .validateTips").val("* Campos requeridos");
					allFields.val("").removeClass("ui-state-error");
					$(this).dialog("close");
				}
			},
			close: function() {
				$("#dialog-form .validateTips").val("* Campos requeridos");
				allFields.val("").removeClass("ui-state-error");
			}
		});
		
		var allFieldsEstados = $([]).add("#add_estado_estado");
		$("#addNewEstado").dialog({
			autoOpen: false,
			height: 180,
			width: 250,
			modal: true,
			resizable: false,
			buttons: {
				"Aceptar": function() {
					var bValid = true;
					allFieldsEstados.removeClass( "ui-state-error" );
					bValid = bValid && checkLength( $("#add_estado_estado"), "Estado", 3, 200);
					if (bValid) {
						addNewEstado();
						var oTable = $('#tablaEstados').dataTable();
						oTable.fnDraw();
						$(this).dialog("close");
					}
				},
				"Cancelar": function() {
					$(this).dialog("close");
				}
			},
			close: function() {
				allFieldsEstados.val("").removeClass("ui-state-error");
			}
		});
		
		$("#actualizarRegistroDialog").dialog({
			autoOpen: false,
			height: 250,
			width: 350,
			modal: true,
			resizable: false,
			buttons: {
				"Aceptar":  function() {
					updateDispositivo();
					$(this).dialog("close");
				},
				"Cancelar": function() {
					$(this).dialog("close");
				}
			}
		});
		
		$("#actualizarEstadoDialog").dialog({
			autoOpen: false,
			height: 190,
			width: 250,
			modal: true,
			resizable: false,
			buttons: {
				"Aceptar":  function() {
					updateEstado();
					$(this).dialog("close");
				},
				"Cancelar": function() {
					$(this).dialog("close");
				}
			}
		});
		
		$("button, input:submit").button();
		$("#nav > li").removeClass("current");
		$("#nav_registros").addClass("current");
		
		tablaDispositivos = $('#tablaDispositivos').dataTable( {
            "bFilter": true,
            "sPaginationType": "full_numbers",
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "dispositivos",
            "sAjaxDataProp": "dispositivos",
            "bLengthChange": false,
            "bPaginate": true,
            "bSort": false,
            "iDisplayLength": 10,
            "bStateSave": true,
            "oLanguage": {
                "sProcessing":   "Buscando...",
                "sZeroRecords":  "No se encontraron registros.",
                "sInfo":         "Dispositivos de _START_ hasta _END_ de un total de _TOTAL_ ",
                "sInfoFiltered": "(Total de _MAX_)",
                "sInfoPostFix":  "",
                "sSearch":       "Busqueda por Modelo:"
            },
            "aoColumns": [
              { "mData": "codigo" },
              { "mData": "modelo" },
              { "mData": "stockMinimo" },
              { 
           		"mData": "codigo",
            	"fnRender": function (o, val) {
            		var editImg = "<c:url value="/resources/img/pencil.gif"/>";
            		var deleteImg = "<c:url value="/resources/img/minus-circle.gif"/>";
            		var link = '<a href="#" onclick="showDetail(\''+$.trim(val)+'\')"><img src="' + editImg + '" width="16" height="16" alt="Modificar"></a>';
                  	link += '<a href="#" onclick="deleteElement(\''+$.trim(val)+'\')"><img src="' + deleteImg +'" width="16" height="16" alt="Eliminar"></a>';
                  	return link;
  				},
  				"bUseRendered": false
              }
            ],
            "fnServerData": function ( sSource, aoData, fnCallback ) {
                $.getJSON(sSource, aoData, function (json) {
                    fnCallback(json);
                });
            }
        });
		
		$('#tablaEstados').dataTable( {
            "bFilter": true,
            "sPaginationType": "full_numbers",
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "estados",
            "sAjaxDataProp": "lista",
            "bLengthChange": false,
            "bPaginate": true,
            "bSort": false,
            "iDisplayLength": 10,
            "bStateSave": true,
            "oLanguage": {
                "sProcessing":   "Buscando...",
                "sZeroRecords":  "No se encontraron registros.",
                "sInfo":         "Estados de _START_ hasta _END_ de un total de _TOTAL_ ",
                "sInfoFiltered": "(Total de _MAX_)",
                "sInfoPostFix":  "",
                "sSearch":       "Busqueda por Estado:"
            },
            "aoColumns": [
              { "mData": "id" },
              { "mData": "estado" },
              { 
           		"mData": "id",
            	"fnRender": function (o, val) {
            		var editImg = "<c:url value="/resources/img/pencil.gif"/>";
            		var deleteImg = "<c:url value="/resources/img/minus-circle.gif"/>";
            		var link = '<a href="#" onclick="showDetailEstado(' + val + ')"><img src="' + editImg + '" width="16" height="16" alt="Modificar"></a>';
                  	link += '<a href="#" onclick="deleteEstado(' + val + ')"><img src="' + deleteImg +'" width="16" height="16" alt="Eliminar"></a>';
                  	return link;
  				},
  				"bUseRendered": false
              }
            ],
            "fnServerData": function ( sSource, aoData, fnCallback ) {
                $.getJSON(sSource, aoData, function (json) {
                    fnCallback(json);
                });
            }
        });
		
		clearFilters();
	});
</script>
<div class="grid_7">
	<div class="module">
		<h2><span>Dispositivos</span></h2>
	    <div class="module-body">
			<table id="tablaDispositivos">
				<thead>
					<tr>
						<th style="width:15%">Codigo</th>
						<th style="width:50%">Modelo</th>
						<th style="width:25%">Stock Minimo</th>
						<th style="width:10%">Accion</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
			<div style="clear:both"></div>
			<button onclick="$('#dialog-form').dialog('open');">Nuevo dispositivo</button>
		</div>
	</div>
</div>
<div class="grid_5">
	<div class="module">
		<h2><span>Estado de dispositivos</span></h2>
	    <div class="module-body">
			<table id="tablaEstados">
				<thead>
					<tr>
						<th style="width:20%">Codigo</th>
						<th style="width:70%">Estado</th>
						<th style="width:10%">Accion</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
			<div style="clear:both"></div>
			<button onclick="$('#addNewEstado').dialog('open');">Agregar estado</button>
		</div>
	</div>
</div>

<!-- Popups (+) -->
<div id="actualizarRegistroDialog" title="Actualizar datos de dispositivo">
	<fieldset>
		<label for="upd_codigo">Codigo</label>
		<input type="text" id="upd_codigo" style="width:95%" class="text ui-widget-content ui-corner-all"  readonly="readonly"/>
		<label for="upd_modelo">Modelo</label>
		<input type="text" id="upd_modelo" style="width:95%" class="text ui-widget-content ui-corner-all" />
		<label for="telefono">Stock Minimo</label>
		<input type="text" id="upd_stock" value="0" style="width:95%" class="text ui-widget-content ui-corner-all" />
	</fieldset>
</div>


<div id="dialog-form" title="Agregar nuevo dispositivo" >
	<p class="validateTips" style="color:red">* Campos requeridos</p>
	<form>
		<fieldset>
			<label for="add_codigo"><span style="color:red">* </span>Codigo</label>
			<input type="text" id="add_codigo" style="width:95%" class="text ui-widget-content ui-corner-all" />
			<label for="add_modelo"><span style="color:red">* </span>Modelo</label>
			<input type="text" id="add_modelo" style="width:95%" class="text ui-widget-content ui-corner-all" />
			<label for="add_stock">Stock minimo</label>
			<input type="text"  id="add_stock" style="width:95%" value="0" class="text ui-widget-content ui-corner-all" />
		</fieldset>
	</form>
</div>

<div id="addNewEstado" title="Agregar nuevo estado" >
	<p class="validateTips" style="color:red">* Campos requeridos</p>
	<form>
		<fieldset>
			<label for="add_estado_estado"><span style="color:red">* </span>Estado</label>
			<input type="text" id="add_estado_estado" style="width:95%" class="text ui-widget-content ui-corner-all" />
		</fieldset>
	</form>
</div>
<div id="actualizarEstadoDialog" title="Actualizar datos de dispositivo">
	<fieldset>
		<label for="upd_estado_codigo">Codigo</label>
		<input type="text" id="upd_estado_codigo" style="width:95%" class="text ui-widget-content ui-corner-all"  readonly="readonly"/>
		<label for="upd_estado">Estado</label>
		<input type="text" id="upd_estado" style="width:95%" class="text ui-widget-content ui-corner-all" />
	</fieldset>
</div>
<!-- Popups (-) -->

